<template>
  <el-container>
    <el-header class="header">
      <p class="tittle">小型规模化养猪场管理系统</p>
      <div class="breads">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/admin' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item
                :to="{ path: state.current.path }"
                v-if="state.current"
            >{{ state.current.label }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <el-button color="rgba(65,211,189,1)" style="color: #f5f5d6" class="back" @click="logout">退出登录</el-button>
    </el-header>
    <el-container style="min-height: 690px">
      <el-aside width="200px" style="background-color:#fff" class="side">
        <el-menu
            active-text-color="#fff"
            class="el-menu-vertical-demo"
            :default-active="route.path"
            text-color="black"
            router
            unique-opened
        >
          <el-menu-item
          v-for="item in state.noChildren"
          :index="item.path"
          :key="item.path"
          @click="clickMenu(item)">
            <span>{{item.label}}</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <div class="container main">
        <tags></tags>
        <div class="container content">
          <router-view></router-view>
        </div>
      </div>
    </el-container>
  </el-container>

</template>

<script setup>
import tags from '../components/admin/tags'
import {reactive,computed} from 'vue'
import {useRoute} from 'vue-router'
import { useStore } from 'vuex'
import router from "@/router";
const store = useStore()
const route = useRoute()
console.log(route.path)
const clickMenu = (item) => {
  store.commit("selectMenu", item)
}
const state = reactive({
  current: computed(() => store.state.currentMenu),
  code:'',
  menu:[
    {
      path:'/admin/Home',
      name:'AdHome',
      label:'首页',
      url:''
    },
    {
      path:'/admin/customer',
      name:'member',
      label:'顾客管理',
      url:''
    },
    {
      path : '/admin/drug',
      name : 'drug',
      label: "药品管理",
      url:''
    },
    {
      path : '/admin/fodder',
      name:'fodder',
      label: "饲料管理",
      url:''
    },
    {
      path : '/admin/environmentalMonitoring',
      name:'EnvironmentalMonitoring',
      label: "环境监控信息管理",
      url:''
    },
    {
      path : '/admin/pig',
      name:'pig',
      label: "生猪管理",
      url:''
    },
    {
      path : '/admin/pigPigDeathRecords',
      name:'pigPigDeathRecords',
      label: "生猪死亡记录管理",
      url:''
    }, {
      path : '/admin/pigDiseaseRecords',
      name:'pigDiseaseRecords',
      label: "生猪疾病记录管理",
      url:''
    },
    {
      path : '/admin/pigFatteningHouseDeathRecords',
      name:'pigFatteningHouseDeathRecords',
      label: "育肥舍死亡记录管理",
      url:''
    },
    {
      path : '/admin/pigLivingSituation',
      name:'pigLivingSituation',
      label: "生猪存栏情况管理",
      url:''
    },
    {
      path : '/admin/pigNurseryDeathRecords',
      name:'pigNurseryDeathRecords',
      label: "保育舍死亡记录管理",
      url:''
    },
    {
      path : '/admin/pigPurchaseRecords',
      name:'pigPurchaseRecords',
      label: "生猪购入记录管理",
      url:''
    },
    {
      path : '/admin/pigSalesRecords',
      name:'pigSalesRecords',
      label: "生猪销售记录管理",
      url:''
    },
    {
      path : '/admin/pigTransferFattening',
      name:'pigTransferFattening',
      label: "生猪转育肥舍记录管理",
      url:''
    },
    {
      path : '/admin/pigTransferNurseryRecords',
      name:'pigTransferNurseryRecords',
      label: "转保育舍记录管理",
      url:''
    },
    {
      path : '/admin/sow',
      name:'sow',
      label: "母猪基本信息管理",
      url:''
    },
    {
      path : '/admin/sowBirthingRecords',
      name:'sowBirthingRecords',
      label: "母猪分娩记录信息管理",
      url:''
    },
    {
      path : '/admin/sowConceptionRecords',
      name:'sowConceptionRecords',
      label: "母猪受胎记录信息管理",
      url:''
    },
    {
      path : '/admin/sowMatingInformation',
      name:'sowMatingInformation',
      label: "母猪配种信息管理",
      url:''
    },
    {
      path : '/admin/sowMatingRecords',
      name:'sowMatingRecords',
      label: "母猪配种记录信息管理",
      url:''
    },

  ],
  noChildren: computed(() => state.menu.filter((item) => !item.children)),
})
const logout=()=>{
  store.commit("logout")
  router.push("/");
}
</script>

<style lang="less" scoped>
  .header {
    position: fixed;
    display: flex;
    width: 100%;
    height: 70px;
    background: linear-gradient(90deg,#1493fa,#01c6fa);
    justify-content: space-between;
    z-index: 999;
    .tittle {
      line-height: 25px;
      font-weight: 700;
      font-size: 22px;
    }
    .breads {
      position: absolute;
      top: 0;
      left: 21%;
    }
    .back {
      margin-top: 20px;
    }
  }
  .side {
    position: fixed;
    top: 69px;
    box-shadow: 2px 0 6px #b0b0b0;
    //height: 100%;
    bottom: 0;
    z-index: 1000;
  }
  .main {
    position: relative;
    top: 70px;
    left: 195px;
    background-color: #fcf5f5;
    padding-right: 0!important;
    padding-left: 0!important;
    .content {
      padding: 45px 37px 20px;
    }
  }
  /deep/.el-menu-item.is-active {
    //background-color: rgb(48,105,132) !important;//你要修改的颜色
    background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
  }
  /deep/ .el-breadcrumb {
    line-height: 70px!important;
  }
  /deep/ .el-breadcrumb__inner {
    color: white;
  }
  /deep/ .el-breadcrumb__item:last-child {
    color: white!important;
  }
</style>
